# Vue 3

在这篇文档中，你可以了解到如何基于 Rsbuild 来构建一个 Vue 3 应用。

## 创建 Vue 3 项目

你可以使用 `create-rsbuild` 来创建一个 Rsbuild + Vue 3 的项目，调用以下命令：

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs
  command={{
    npm: 'npm create rsbuild@latest',
    yarn: 'yarn create rsbuild',
    pnpm: 'pnpm create rsbuild@latest',
    bun: 'bun create rsbuild@latest',
  }}
/>

然后在 `Select framework` 时选择 `Vue 3` 即可。

## 在已有项目中使用 Vue

为了能够编译 Vue 的 SFC（单文件组件），你需要注册 Rsbuild 的 [Vue 插件](/plugins/list/plugin-vue)，插件会自动添加 Vue 构建所需的配置。

例如，在 `rsbuild.config.ts` 中注册：

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
});
```

:::tip
对于使用 Vue CLI 的项目，可以参考 [Vue CLI 迁移指南](/guide/migration/vue-cli)。
:::

## 使用 Vue JSX 语法

如果你需要使用 Vue 的 JSX 语法，还需要注册 Rsbuild 的 [Vue 3 JSX 插件](/plugins/list/plugin-vue-jsx)。

## TypeScript 支持

Rsbuild 默认支持编译 TypeScript。

请参考 Vue 官方文档的 [TypeScript - IDE 支持](https://cn.vuejs.org/guide/typescript/overview.html#ide-support) 小节，了解如何在 IDE 中设置 Vue TypeScript 支持。
